<!--
  @author yangjiangming
  @date 2018-12-10 20:40:28
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('服务项', ~{::title}, ~{::content}, ~{::script})}">
<head>
    <title>工单管理-服务项</title>
</head>
<body>

<div class="modify-content" th:fragment="content">
    <link rel="stylesheet" href="/static/style/work/modify/serviceItem.css">
    <div class="service-item">
        <div class="layui-card" style="border: 1px">
            <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
                <legend>已选项目</legend>
                <!--<div class="layui-card-header">已选项目</div>-->
                <div class="layui-card-body">
                    <th:block th:each="product : ${serviceItemVOList}">
                        <table class="layui-table service-item-table" lay-size="lg" lay-skin="line">
                            <colgroup>
                                <col>
                                <col>
                                <col width="80">
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td th:text="|${product.productName} x1|"></td>
                                    <td th:text="|总计：${#moneyUtil.parseToYuanStr(product.totalAmount)}|" style="text-align: right; color: #FD682A; z"></td>
                                    <td>
                                        <button class="edit-btn layui-btn"
                                                data-th-data-work-id="${product.workId}"
                                                data-th-data-order-id="${product.orderId}"
                                                data-th-data-product-id="${product.productId}"
                                                data-th-data-proext-id="${product.proExtId}">
                                            <i class="layui-icon layui-icon-edit"></i> 编辑
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </th:block>

                    <caption>
                        <div style="float: right">
                            <span>订单金额：</span>
                            <span th:text="|${updatePriceVO.originalAmount != null ? #moneyUtil.parseToYuanStr(updatePriceVO.originalAmount) : '0'}|"></span>
                            <span>优惠总额：</span>
                            <span th:text="|${updatePriceVO.discountAmount != null ? #moneyUtil.parseToYuanStr(updatePriceVO.discountAmount) : '0'}|"></span>
                            <span>订单收入：</span>
                            <span th:text="|${updatePriceVO.totalAmount != null ? #moneyUtil.parseToYuanStr(updatePriceVO.totalAmount) : '0'}|"></span>
                            <span>预付款：</span>
                            <span th:text="|${updatePriceVO.prepayAmount != null ? #moneyUtil.parseToYuanStr(updatePriceVO.prepayAmount) : '0'}|"></span>
                        </div>
                    </caption>

                    <form class="layui-form">
                        <input type="hidden" id="casSign" name="casSign" th:value="${casSign}"/>
                        <input type="hidden" id="work-id" name="workId" th:value="${updatePriceVO.workId}">
                        <input type="hidden" id="order-id" name="orderId" th:value="${updatePriceVO.orderId}">
                        <input type="hidden" id="oldAmount" name="oldAmount" th:value="${updatePriceVO.oldAmount}">

                        <table class="layui-table service-item-detail-table">
                            <caption>收款明细
                            </caption>
                            <thead>
                            <tr>
                                <th>收款类型</th>
                                <th>金额（元）</th>
                                <th>支付方式</th>
                                <th>支付状态</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr th:each="orderPayVO : ${updatePriceVO.orderPayList}">
                                    <td th:text="${orderPayVO.amountTypeName}" ></td>
                                    <td>
                                        <th:block th:if="${orderPayVO.payStatus == 4}">
                                            <input id="amount"
                                                   class="layui-input"
                                                   type="number"
                                                   name="yesAmount"
                                                   autocomplete="off"
                                                   th:classappend="layui-disabled"
                                                   th:disabled="true"
                                                   th:value="${orderPayVO.amount != null ? #moneyUtil.parseToYuanStr(orderPayVO.amount) : ''}">
                                        </th:block>
                                        <th:block th:if="${orderPayVO.payStatus != 4}">
                                            <input id="nonAmount"
                                                   class="layui-input"
                                                   type="number"
                                                   name="amount"
                                                   autocomplete="off"
                                                   th:data-th-data-orderPayId="${orderPayVO.orderPayId}"
                                                   th:data-th-data-amountType="${orderPayVO.amountType}"
                                                   th:disabled="false"
                                                   th:value="${orderPayVO.amount != null ? #moneyUtil.parseToYuanStr(orderPayVO.amount) : ''}">
                                        </th:block>
                                    </td>
                                    <td th:text="${orderPayVO.payType != null ? orderPayVO.payTypeName : '--'}" ></td>
                                    <td th:text="${orderPayVO.payStatusName}" ></td>
                                </tr>
                                <tr>
                                    <td>工程师收款</td>
                                    <td>
                                        <span class="master-amount" th:if="${updatePriceVO.masterAmount != null}"
                                              th:text="${#moneyUtil.parseToYuanStr(updatePriceVO.masterAmount)}"></span>
                                    </td>
                                    <td>--</td>
                                    <td>未支付</td>
                                </tr>
                            <caption>
                                <span class="desc">工程师收款 = 订单金额 - 总优惠 - 渠道预收 - 平台预收 - 定金 - 进度款</span>
                            </caption>

                            <tr>
                                <td colspan="6">
                                    <textarea class="layui-textarea" name="operatorRemark" placeholder="其他改价缘由"></textarea>

                                    <div class="row-btn-wrapper">
                                        <button class="layui-btn layui-btn-normal " id="submit-btn" lay-submit="">保存</button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                        <!--<table class="layui-table service-item-detail-table">
                        <caption>明细
                            <span class="desc">(工程师收款金额=订单金额-优惠-预收款-定金）</span>
                        </caption>
                        <thead>
                            <tr>
                                <th>订单金额</th>
                                <th>优惠</th>
                                <th>订单收入</th>
                                <th>预收款</th>
                                <th>定金</th>
                                <th>工程师收款金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                &lt;!&ndash; 订单金额 &ndash;&gt;
                                <td>
                                    <span th:if="${updatePriceVO.originalAmount}"
                                          th:text="|${#moneyUtil.parseToYuanStr(updatePriceVO.originalAmount)}|">
                                    </span>
                                </td>
                                &lt;!&ndash; 优惠 &ndash;&gt;
                                <td>
                                    <span th:if="${updatePriceVO.discountAmount}"
                                          th:text="|${#moneyUtil.parseToYuanStr(updatePriceVO.discountAmount)}|">
                                    </span>
                                </td>
                                &lt;!&ndash; 订单收入 &ndash;&gt;
                                <td>
                                    <span th:if="${updatePriceVO.totalAmount != null}"
                                          th:text="|${#moneyUtil.parseToYuanStr(updatePriceVO.totalAmount)}|">
                                    </span>
                                </td>
                                &lt;!&ndash; 预收款 &ndash;&gt;
                                <td>
                                    <span th:if="${updatePriceVO.channelPrepayAmount}"
                                          th:text="|${#moneyUtil.parseToYuanStr(updatePriceVO.channelPrepayAmount)}|">
                                    </span>
                                </td>
                                &lt;!&ndash; 定金 &ndash;&gt;
                                <td>
                                    <th:block th:with="isDisabled = ${!depositEditable}">
                                        <input id="depositAmount"
                                               class="layui-input"
                                               type="number"
                                               name="depositAmount"
                                               autocomplete="off"
                                               th:classappend="${isDisabled} ? 'layui-disabled'"
                                               th:disabled="${isDisabled}"
                                               th:value="${updatePriceVO.depositAmount != null ? #moneyUtil.parseToYuanStr(updatePriceVO.depositAmount) : ''}">
                                    </th:block>
                                </td>
                                &lt;!&ndash; 工程师收款金额 &ndash;&gt;
                                <td>
                                    <span class="master-amount" th:if="${updatePriceVO.masterAmount != null}"
                                          th:text="${#moneyUtil.parseToYuanStr(updatePriceVO.masterAmount)}"></span>
                                </td>
                            </tr>

                            <tr>
                                <td colspan="6">
                                    <textarea class="layui-textarea" name="operatorRemark" placeholder="其他改价缘由"></textarea>

                                    <div class="row-btn-wrapper">
                                        <button class="layui-btn layui-btn-normal " id="submit-btn" lay-submit="">保存</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>-->
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<div class="layui-row layui-hide" id="editDetails">
    <div class="layui-inline" style="width:45%;">
        <div class="layui-table-box">
            <div class="layui-table-header">
                <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th colspan="3">服务等级</th>
                    </tr>
                    <tr>
                        <th colspan="3" id="service-level">
                            <a href="javascript:void(0)" levelId='0'
                               class="level-btn layui-btn layui-btn-primary layui-btn-sm"
                               style="margin: 3px">全部</a>
                        </th>
                    </tr>
                    <tr>
                        <th colspan="3">服务项目</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="layui-table-body layui-table-main" style="height: 370px;background-color: white;">
                <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-skin="nob" style="
        margin-top: 0px;
        margin-bottom: 0px;
    ">
                    <tbody id="left-tbody">
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="layui-inline" style="width:9%;">
        <div >→</div>
        <div >
            <a href="javascript:void(0)"  class="layui-btn">保存</a>
        </div>
    </div>
    <div class="layui-inline" style="width:45%;">
        <div class="layui-table-box">
            <div class="layui-table-header">
                <table cellspacing="0" cellpadding="0" style="text-align: center;" border="0" class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th data-field="0" data-key="7-0-0" colspan="3" data-unresize="true"
                            class=" layui-table-col-special">
                            <div class="layui-table-cell laytable-cell-group"><span>已选项目</span></div>
                        </th>
                    </tr>
                    <tr>
                        <th data-field="0" data-key="7-1-0" data-parentkey="0-0"
                            class=" layui-table-col-special">
                            <div class="layui-table-cell laytable-cell-7-1-0"><span>服务项目</span></div>
                        </th>
                        <th data-field="1" data-key="7-1-1" data-parentkey="0-0"
                            class=" layui-table-col-special">
                            <div class="layui-table-cell laytable-cell-7-1-1" style="
        width: 130px;
        text-align: center;
        padding-left: 40px;
    "><span>数量</span></div>
                        </th>
                        <th data-field="2" data-key="7-1-2" data-parentkey="0-0"
                            class=" layui-table-col-special">
                            <div class="layui-table-cell laytable-cell-7-1-2"><span>价格</span></div>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="layui-table-body layui-table-main" style="height: 370px;background-color: white;">
                <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-skin="nob" style="margin-top: 0px;margin-bottom: 0px;">
                    <tbody id="right-tbody">
                    </tbody>
                </table>
            </div>
            <div id="total"
                 style="text-align: right;color:#ff7c25;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;background-color: white;">
                总计:300.00
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var updatePriceVO = [[${updatePriceVO}]];
    var layuiModel = {
        oms_work_modify_serviceitem: "work/modify/zmn.oms.work.modify.serviceitem"
    };
</script>
</body>
</html>